<template>
  <view class="uni-ui-demo">
    <!-- 使用uni-ui导航栏 -->
    <uni-nav-bar 
      :fixed="true" 
      :shadow="true" 
      :border="false"
      background-color="#ffffff"
      status-bar
      left-icon="back"
      title="uni-ui组件演示"
      @clickLeft="goBack"
    />
    
    <!-- 主要内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 卡片组件 -->
      <uni-card 
        :is-shadow="false" 
        :is-full="true" 
        title="基础信息卡片"
        sub-title="使用uni-card组件"
        extra="更多"
        @click="handleCardClick"
      >
        <text class="card-content">这是一个使用uni-ui组件库构建的卡片内容区域。</text>
      </uni-card>
      
      <!-- 列表组件 -->
      <uni-section title="列表组件" type="line">
        <uni-list>
          <uni-list-item 
            :show-arrow="true"
            title="设置项1"
            note="这是描述信息"
            thumb="/static/icons/settings.png"
            @click="handleListClick"
          />
          <uni-list-item 
            :show-arrow="true"
            :show-badge="true"
            badge-text="99+"
            title="消息通知"
            note="查看未读消息"
            thumb="/static/icons/message.png"
          />
          <uni-list-item 
            :show-switch="true"
            :switch-checked="switchValue"
            title="开关设置"
            note="启用/禁用功能"
            @switchChange="handleSwitchChange"
          />
        </uni-list>
      </uni-section>
      
      <!-- 表单组件 -->
      <uni-section title="表单组件" type="line">
        <view class="form-container">
          <!-- 输入框 -->
          <uni-easyinput 
            v-model="formData.name"
            placeholder="请输入姓名"
            :clearable="true"
          />
          
          <!-- 数字输入框 -->
          <uni-number-box 
            v-model="formData.count"
            :min="1"
            :max="100"
            :step="1"
          />
          
          <!-- 日期选择器 -->
          <uni-datetime-picker 
            v-model="formData.date"
            type="date"
            :clear-icon="false"
            placeholder="选择日期"
          />
          
          <!-- 评分组件 -->
          <view class="rate-container">
            <text class="rate-label">评分：</text>
            <uni-rate 
              v-model="formData.rating"
              :size="18"
              :value="formData.rating"
              @change="handleRateChange"
            />
          </view>
        </view>
      </uni-section>
      
      <!-- 数据展示组件 -->
      <uni-section title="数据展示" type="line">
        <!-- 统计数字 -->
        <uni-row :gutter="20">
          <uni-col :span="8">
            <uni-card>
              <view class="stat-item">
                <text class="stat-number">{{ stats.habits }}</text>
                <text class="stat-label">习惯数</text>
              </view>
            </uni-card>
          </uni-col>
          <uni-col :span="8">
            <uni-card>
              <view class="stat-item">
                <text class="stat-number">{{ stats.todos }}</text>
                <text class="stat-label">待办数</text>
              </view>
            </uni-card>
          </uni-col>
          <uni-col :span="8">
            <uni-card>
              <view class="stat-item">
                <text class="stat-number">{{ stats.days }}</text>
                <text class="stat-label">坚持天数</text>
              </view>
            </uni-card>
          </uni-col>
        </uni-row>
        
        <!-- 进度条 -->
        <view class="progress-container">
          <text class="progress-label">今日完成度</text>
          <uni-progress 
            :percent="progressPercent"
            :show-info="true"
            stroke-width="8"
            activeColor="#10B981"
          />
        </view>
      </uni-section>
      
      <!-- 操作按钮 -->
      <view class="button-container">
        <uni-row :gutter="20">
          <uni-col :span="12">
            <button 
              class="uni-button" 
              type="primary" 
              @click="handlePrimaryAction"
            >
              主要操作
            </button>
          </uni-col>
          <uni-col :span="12">
            <button 
              class="uni-button" 
              type="default" 
              @click="handleSecondaryAction"
            >
              次要操作
            </button>
          </uni-col>
        </uni-row>
      </view>
      
      <!-- 浮动操作按钮 -->
      <uni-fab 
        :pattern="fabPattern"
        :content="fabContent"
        :horizontal="'right'"
        :vertical="'bottom'"
        :pop-menu="true"
        @trigger="handleFabTrigger"
      />
    </scroll-view>
    
    <!-- 弹窗组件 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <text class="popup-title">提示</text>
        <text class="popup-message">{{ popupMessage }}</text>
        <view class="popup-buttons">
          <button class="popup-button" @click="closePopup">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'UniUIDemo',
  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        count: 1,
        date: '',
        rating: 3
      },
      
      // 开关状态
      switchValue: false,
      
      // 统计数据
      stats: {
        habits: 12,
        todos: 8,
        days: 25
      },
      
      // 进度百分比
      progressPercent: 75,
      
      // 浮动按钮配置
      fabPattern: {
        color: '#10B981',
        backgroundColor: '#fff',
        selectedColor: '#fff',
        buttonColor: '#10B981',
        iconColor: '#fff'
      },
      
      fabContent: [
        {
          iconPath: '/static/icons/add.png',
          selectedIconPath: '/static/icons/add-active.png',
          text: '添加',
          active: false
        },
        {
          iconPath: '/static/icons/edit.png',
          selectedIconPath: '/static/icons/edit-active.png',
          text: '编辑',
          active: false
        }
      ],
      
      // 弹窗消息
      popupMessage: ''
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 卡片点击事件
    handleCardClick() {
      this.showPopup('卡片被点击了！')
    },
    
    // 列表项点击事件
    handleListClick() {
      this.showPopup('列表项被点击了！')
    },
    
    // 开关变化事件
    handleSwitchChange(e) {
      this.switchValue = e.value
      this.showPopup(`开关状态：${e.value ? '开启' : '关闭'}`)
    },
    
    // 评分变化事件
    handleRateChange(e) {
      this.formData.rating = e.value
      this.showPopup(`评分：${e.value}星`)
    },
    
    // 主要操作
    handlePrimaryAction() {
      this.showPopup('执行主要操作')
    },
    
    // 次要操作
    handleSecondaryAction() {
      this.showPopup('执行次要操作')
    },
    
    // 浮动按钮触发事件
    handleFabTrigger(e) {
      this.showPopup(`浮动按钮：${e.item.text}`)
    },
    
    // 显示弹窗
    showPopup(message) {
      this.popupMessage = message
      this.$refs.popup.open()
    },
    
    // 关闭弹窗
    closePopup() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped>
.uni-ui-demo {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.content {
  padding: 20rpx;
  padding-top: 100rpx; /* 为固定导航栏留出空间 */
}

.card-content {
  color: #666;
  font-size: 28rpx;
  line-height: 1.5;
}

.form-container {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.form-container > * {
  margin-bottom: 20rpx;
}

.rate-container {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.rate-label {
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.stat-item {
  text-align: center;
  padding: 20rpx;
}

.stat-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #10B981;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.progress-container {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.progress-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.button-container {
  padding: 40rpx 20rpx;
}

.uni-button {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.popup-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  width: 500rpx;
  text-align: center;
}

.popup-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.popup-message {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.popup-buttons {
  display: flex;
  justify-content: center;
}

.popup-button {
  background-color: #10B981;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}
</style>